<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>反弹球游戏</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
            overflow: hidden;
            color: white;
        }
        
        .game-title {
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 1rem;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }
        
        #game-container {
            position: relative;
            width: 600px;
            height: 400px;
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
            overflow: hidden;
        }
        
        #game-canvas {
            width: 100%;
            height: 100%;
        }
        
        #score-display {
            position: absolute;
            top: 20px;
            left: 20px;
            font-size: 1.5rem;
            font-weight: bold;
            color: #4b5563;
        }
        
        #score-value {
            color: #ef4444;
        }
        
        #game-over {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 2rem;
            z-index: 10;
        }
        
        #final-score {
            font-size: 1.5rem;
            margin: 1rem 0;
        }
        
        #restart-btn {
            margin-top: 1rem;
            padding: 0.75rem 1.5rem;
            background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        #restart-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }
        
        .instructions {
            margin-top: 1.5rem;
            text-align: center;
            font-size: 1.1rem;
            color: rgba(255, 255, 255, 0.9);
            max-width: 600px;
            line-height: 1.6;
        }
        
        @keyframes ballHit {
            0% { transform: scale(1); }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }
        
        .ball-hit {
            animation: ballHit 0.2s ease-out;
        }
    </style>
</head>
<body>
    <h1 class="game-title">反弹球游戏</h1>
    
    <div id="game-container">
        <canvas id="game-canvas"></canvas>
        <div id="score-display">分数: <span id="score-value">0</span></div>
        <div id="game-over">
            <div>游戏结束!</div>
            <div id="final-score">最终分数: 0</div>
            <button id="restart-btn">按空格键重新开始</button>
        </div>
    </div>
    
    <div class="instructions">
        <p>使用方向键左右移动方块，按空格键重新开始</p>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const canvas = document.getElementById('game-canvas');
            const ctx = canvas.getContext('2d');
            const scoreDisplay = document.getElementById('score-value');
            const gameOverDisplay = document.getElementById('game-over');
            const finalScoreDisplay = document.getElementById('final-score');
            const restartBtn = document.getElementById('restart-btn');
            
            // 音效对象
            const sounds = {
                wallHit: new Audio('https://www.orangefreesounds.com/wp-content/uploads/2022/04/Success-chime-sound-effect.mp3'),
                paddleHit: new Audio('https://www.orangefreesounds.com/wp-content/uploads/2022/04/Success-sound-effect.mp3'),
                gameOver: new Audio('https://www.orangefreesounds.com/wp-content/uploads/2022/04/8-bit-fail-sound.mp3')
            };
            
            // 音效授权说明 (CC BY-NC 4.0)
            // 这些音效来自Orange Free Sounds (https://www.orangefreesounds.com/)
            // 根据知识共享署名-非商业性使用4.0国际许可协议授权
            // 完整许可协议: https://creativecommons.org/licenses/by-nc/4.0/
            
            // 音效加载错误处理
            Object.values(sounds).forEach(sound => {
                sound.onerror = () => {
                    console.warn('音效加载失败:', sound.src);
                };
            });
            
            // 设置canvas实际尺寸
            canvas.width = canvas.offsetWidth;
            canvas.height = canvas.offsetHeight;
            
            // 游戏参数
            const game = {
                ball: {
                    x: canvas.width / 2,
                    y: 50,
                    radius: 15,
                    dx: 3,
                    dy: 3,
                    color: '#f97316',
                    hit: false
                },
                paddle: {
                    width: 100,
                    height: 15,
                    x: canvas.width / 2 - 50,
                    y: canvas.height - 30,
                    color: '#10b981',
                    speed: 8,
                    shadowColor: 'rgba(16, 185, 129, 0.5)'
                },
                score: 0,
                isGameOver: false,
                keys: {
                    left: false,
                    right: false
                }
            };
            
            // 绘制球
            function drawBall() {
                ctx.save();
                if (game.ball.hit) {
                    ctx.shadowBlur = 15;
                    ctx.shadowColor = game.ball.color;
                }
                
                ctx.beginPath();
                ctx.arc(game.ball.x, game.ball.y, game.ball.radius, 0, Math.PI * 2);
                ctx.fillStyle = game.ball.color;
                ctx.fill();
                ctx.closePath();
                
                ctx.restore();
                
                // 重置击中状态
                if (game.ball.hit) {
                    setTimeout(() => {
                        game.ball.hit = false;
                    }, 200);
                }
            }
            
            // 绘制方块
            function drawPaddle() {
                ctx.beginPath();
                ctx.rect(game.paddle.x, game.paddle.y, game.paddle.width, game.paddle.height);
                
                // 添加渐变效果
                const gradient = ctx.createLinearGradient(game.paddle.x, game.paddle.y, game.paddle.x + game.paddle.width, game.paddle.y);
                gradient.addColorStop(0, '#10b981');
                gradient.addColorStop(1, '#3b82f6');
                
                ctx.fillStyle = gradient;
                ctx.shadowBlur = 10;
                ctx.shadowColor = game.paddle.shadowColor;
                ctx.fill();
                ctx.closePath();
                
                // 重置阴影
                ctx.shadowBlur = 0;
            }
            
            // 更新游戏状态
            function update() {
                // 清除画布
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                // 绘制游戏元素
                drawBall();
                drawPaddle();
                
                // 更新分数显示
                scoreDisplay.textContent = game.score;
                
                // 如果游戏结束，显示游戏结束界面
                if (game.isGameOver) {
                    gameOverDisplay.style.display = 'flex';
                    finalScoreDisplay.textContent = `最终分数: ${game.score}`;
                    return;
                }
                
                // 移动球
                game.ball.x += game.ball.dx;
                game.ball.y += game.ball.dy;
                
                // 检测球与墙壁碰撞
                // 左右墙壁
                if (game.ball.x + game.ball.radius > canvas.width || game.ball.x - game.ball.radius < 0) {
                    game.ball.dx = -game.ball.dx;
                    sounds.wallHit.play().catch(e => console.warn('无法播放音效:', e));
                }
                
                // 顶部墙壁
                if (game.ball.y - game.ball.radius < 0) {
                    game.ball.dy = -game.ball.dy;
                    sounds.wallHit.play().catch(e => console.warn('无法播放音效:', e));
                }
                
                // 底部墙壁 - 游戏结束
                if (game.ball.y + game.ball.radius > canvas.height) {
                    game.isGameOver = true;
                    sounds.gameOver.play().catch(e => console.warn('无法播放音效:', e));
                }
                
                // 检测球与方块碰撞
                if (
                    game.ball.x + game.ball.radius > game.paddle.x &&
                    game.ball.x - game.ball.radius < game.paddle.x + game.paddle.width &&
                    game.ball.y + game.ball.radius > game.paddle.y &&
                    game.ball.y - game.ball.radius < game.paddle.y + game.paddle.height
                ) {
                    game.ball.dy = -game.ball.dy;
                    game.score++;
                    game.ball.hit = true;
                    sounds.paddleHit.play().catch(e => console.warn('无法播放音效:', e));
                    
                    // 根据击中位置改变球的水平速度
                    const hitPosition = (game.ball.x - game.paddle.x) / game.paddle.width;
                    game.ball.dx = 5 * (hitPosition - 0.5) * 2;
                }
                
                // 移动方块
                if (game.keys.left && game.paddle.x > 0) {
                    game.paddle.x -= game.paddle.speed;
                    // 改变阴影颜色
                    game.paddle.shadowColor = 'rgba(59, 130, 246, 0.5)';
                } else if (game.keys.right && game.paddle.x < canvas.width - game.paddle.width) {
                    game.paddle.x += game.paddle.speed;
                    // 改变阴影颜色
                    game.paddle.shadowColor = 'rgba(16, 185, 129, 0.5)';
                } else {
                    // 重置阴影颜色
                    game.paddle.shadowColor = 'rgba(16, 185, 129, 0.5)';
                }
                
                // 继续动画
                requestAnimationFrame(update);
            }
            
            // 键盘控制
            document.addEventListener('keydown', function(e) {
                if (e.key === 'ArrowLeft') {
                    game.keys.left = true;
                } else if (e.key === 'ArrowRight') {
                    game.keys.right = true;
                } else if (e.key === ' ' && game.isGameOver) {
                    resetGame();
                }
            });
            
            document.addEventListener('keyup', function(e) {
                if (e.key === 'ArrowLeft') {
                    game.keys.left = false;
                } else if (e.key === 'ArrowRight') {
                    game.keys.right = false;
                }
            });
            
            // 重置游戏
            function resetGame() {
                game.ball.x = canvas.width / 2;
                game.ball.y = 50;
                game.ball.dx = 3;
                game.ball.dy = 3;
                game.paddle.x = canvas.width / 2 - 50;
                game.score = 0;
                game.isGameOver = false;
                gameOverDisplay.style.display = 'none';
                update();
            }
            
            // 点击按钮重新开始
            restartBtn.addEventListener('click', resetGame);
            
            // 开始游戏
            resetGame();
            
            // 窗口大小改变时调整canvas尺寸
            window.addEventListener('resize', function() {
                canvas.width = canvas.offsetWidth;
                canvas.height = canvas.offsetHeight;
            });
        });
    </script>
</body>
</html>